.DashboardSidebar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 1;
  color: var(--DashboardSidebarColorText);
  background-color: var(--DashboardSidebarColorBg);
  box-shadow: var(--DashboardSidebarShadow);
  transition: background-color .3s ease;


  @include media-down(sm) {
    box-shadow: none;

    .-sidebar-open-mobile & {
      box-shadow: var(--DashboardSidebarShadow);
    }
  }

  @include media(md) {
    box-shadow: none;

    .-sidebar-open-tablet & {
      box-shadow: var(--DashboardSidebarShadow);
    }
  }

  @include media-up(lg) {
    .-sidebar-closed-desktop & {
      box-shadow: none;
    }
  }

  // Sidebar background image
  &:before {
    position: absolute;
    width: 100%;
    height:100%;
    left:0;
    top:0;
    display: block;
    content: ' ';
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    background-image: var(--DashboardSidebarBgImage);
    opacity: var(--DashboardSidebarBgImageOpacity);
    z-index: -1;
  }



  /*----------  Sidebar Content  ----------*/

  .SidebarContent {
    flex: 1;
    overflow-x: visible;
    overflow-y: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

    &::-webkit-scrollbar {
      width: 14px;
      height: 18px;
      // background-color: rgba(0, 0, 0, 0);
      background:transparent;
      // background-color: none;
    }

    &::-webkit-scrollbar-thumb {
      height: 6px;
      border: 4px solid rgba(0, 0, 0, 0);
      background-clip: padding-box;
      -webkit-border-radius: 7px;
      -webkit-box-shadow: none;
      background-color: rgba(0, 0, 0, 0.1);
    }

    &:hover {
      &::-webkit-scrollbar-thumb {
        background-color: var(--colorPrimary);
        -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
      }
    }

    @include media-down(md) {
      &::-webkit-scrollbar-thumb {
        background-color: var(--colorPrimary);
        -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
      }
    }
  }

}
